vue2.0学习笔记（三）：vue组件主要的api用法

vue主要的api用法:github链接（demo01--持续更新中）

<template></template>

一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。简单说就是放html标签

<script></script>

存放js语法的地方

<style scoped lang="less"></style>

存放 css scoped使组件中css只能在当前组件中使用，在其他组件无效 lang="less" 加载less,编译成css文件

data

vue组件所有的数据，存放在data 中，并return
data() {
},

created

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
created() {
},

mounted

在实例挂载完成以后调用，常常用于dom更新
mounted: function() {
},

methods

vue组件所有方法 放到methods 中
methods: {
}

<!--存放html-->
<template>
  <div class="hello">
    <h2>{{msg}}</h2>
    <el-button @click="_handleClick()">默认按钮</el-button>
  </div>
</template>
<!--存放js-->
<script>
export default {
  name: "HelloWorld",
  //vue组件所有的数据，存放在data 中，并return
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
  created() {
    console.count("实例创建完成");
  },
  //在实例挂载完成以后调用，常常用于dom更新
  mounted: function() {
    this.$nextTick(function() {
      
    });
  },
  //vue组件所有方法 放到methods 中
  methods: {
    _handleClick() {
      console.log(111);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- 存放 css  scoped使组件中css只能在当前组件中使用，在其他组件无效  lang="less" 加载less,编译成css文件-->
<style scoped lang="less">
.hello {
  height: 30px;
  h2 {
    background: #dcdc3e;
  }
}
</style>

components

渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。

<template>
  <div id="app">
    <!--第三步 在template 中渲染组件-->
    <Demo01/>

  </div>
</template>

<script>
//第一步 引入Demo01 组件
import Demo01 from './components/demo01/demo01'

export default {
  name: 'App',
  //第二步 在components 中注册组件
  components: {
    Demo01
  }
}
</script>

<style>

</style>